<template>
  <n-modal
    ref="modalRef"
    v-bind="getModalOptions"
    :style="`width:${getModalOptions.width}px`"
    :title="options.title"
  >
    <n-card :bordered="false">
      <slot name="Context" />
    </n-card>
  </n-modal>
</template>

<script>
import { CloseOutline, AddOutline } from '@vicons/ionicons5'
import { defineComponent, computed, ref, h } from 'vue'
export default defineComponent({
  name: 'CardDialogModal',
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    onConfirm: null,
    onClose: (value) => {
      return value
    }
  },
  setup(props, { emit }) {
    const modalRef = ref(null)
    const getModalOptions = computed(() => {
      return {
        ...props.options,
        width: props.options.width || 600,
        preset: props.options.preset || 'dialog',
        showIcon: !!props.options.showIcon,
        negativeButtonProps: {
          color: '#1F2935',
          ghost: false,
          renderIcon: () => h(CloseOutline)
        },
        positiveButtonProps: {
          renderIcon: () => h(AddOutline)
        }
      }
    })
    const handleConfirm = function() {
      emit('onConfirm')
      return false
    }
    const handleClose = function() {
      emit('onClose', true)
    }

    // setTimeout(() => {
    //   const dialogHeaderEl = document.querySelector('.n-card-header')
    //   const dragDom = document.querySelector('.n-modal')
    //   dragDom.style.overflow = 'auto'
    //   dialogHeaderEl.style.cursor = 'move'
    //   const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
    //   const moveDown = (e) => {
    //     // 鼠标按下，计算当前元素距离可视区的距离
    //     const disX = e.clientX - dialogHeaderEl.offsetLeft
    //     const disY = e.clientY - dialogHeaderEl.offsetTop
    //     // 获取到的值带px 正则匹配替换
    //     let styL, styT
    //     // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
    //     if (sty.left.includes('%')) {
    //       styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
    //       styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
    //     } else {
    //       styL = +sty.left.replace(/\px/g, '')
    //       styT = +sty.top.replace(/\px/g, '')
    //     }
    //     document.onmousemove = function(e) {
    //       // 计算移动的距离
    //       const l = e.clientX - disX
    //       const t = e.clientY - disY
    //       // 移动当前元素
    //       dragDom.style.left = `${l + styL}px`
    //       dragDom.style.top = `${t + styT}px`
    //     }
    //     document.onmouseup = function(e) {
    //       document.onmousemove = null
    //       document.onmouseup = null
    //     }
    //   }
    //   dialogHeaderEl.onmousedown = moveDown
    // })

    return {
      modalRef,
      getModalOptions,
      handleConfirm,
      handleClose
    }
  }
})
</script>

<style scoped lang='scss'>
::v-deep(.n-scrollbar-content){
  &:first-child{
    display: none;
  }
}
</style>
